<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->
<script id="repositoriesMain" type="text/html">
  <div class="page-header">
    <h2><img src="images/system-file-manager-32-32.png"/>${$.i18n.prop('administration.repositories')}</h2>
  </div>

  <ul id="repositories-tabs" class="nav nav-tabs">
    <li class="active">
      <a data-toggle="tab" href="#managed-repositories-content">${$.i18n.prop('managedrepositories.grid.head')}</a>
    </li>
    <li>
      <a data-toggle="tab" href="#remote-repositories-content">${$.i18n.prop('remoterepositories.grid.head')}</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="managed-repositories-content" class="tab-pane active">
      <ul id="managed-repositories-pills" class="nav nav-pills">
        <li class="active" id="managed-repositories-view-li">
          <a data-toggle="tab" href="#managed-repositories-view" id="managed-repositories-view-a">${$.i18n.prop('managedrepositories.grid.tab.title')}</a>
        </li>
        <li id="managed-repository-edit-li">
          <a data-toggle="tab" href="#managed-repository-edit">${$.i18n.prop('add')}</a>
        </li>
      </ul>
      <div id="managed-repositories-tabs-content" class="pill-content">
        <div id="managed-repositories-view" class="pill-pane active">
          <div id="managed-repositories-bulk-save-btn"
               data-bind='template:{name:"managed-repositories-bulk-save-tmpl"}'></div>
          <table class="table table-striped table-bordered" id="managed-repositories-table"
                 data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_managed-repositoriesGrid',pageLinksId:'managed-repositoriesPagination',data:'managedRepositories'">
          </table>
          <div id="managed-repositoriesPagination"></div>
          <div id="managed-repositories-pom-snippet"></div>
        </div>
        <div id="managed-repository-edit" class="pill-pane" data-bind='template: {name:"managed-repository-edit-tmpl"}'>
        </div>
      </div>
    </div>


    <div id="remote-repositories-content" class="tab-pane">
      <ul id="remote-repositories-pills" class="nav nav-pills">
        <li class="active" id="remote-repositories-view-li">
          <a data-toggle="tab" href="#remote-repositories-view" id="remote-repositories-view-a">${$.i18n.prop('remoterepositories.grid.tab.title')}</a>
        </li>
        <li id="remote-repository-edit-li">
          <a data-toggle="tab" href="#remote-repository-edit">${$.i18n.prop('add')}</a>
        </li>
      </ul>
      <div id="remote-repositories-tabs-content" class="pill-content">
        <div id="remote-repositories-view" class="pill-pane active">
          <div id="remote-repositories-bulk-save-btn"
               data-bind='template:{name:"remote-repositories-bulk-save-tmpl"}'></div>
          <table class="table table-striped table-bordered" id="remote-repositories-table"
                 data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_remote-repositoriesGrid',pageLinksId:'remote-repositoriesPagination',data:'remoteRepositories'">
          </table>
          <div id="remote-repositoriesPagination"></div>
        </div>
        <div id="remote-repository-edit" class="pill-pane" data-bind='template:{name:"remote-repository-edit-tmpl"}'>
        </div>
      </div>
    </div>
  </div>
</script>

<script id='ko_managed-repositoriesGrid' type='text/html'>
  <thead>
  <tr>
    {{each(i, columnDefinition) columns}}
    <th title="${ columnDefinition.title }">${ columnDefinition.headerText }</th>
    {{/each}}
    <th>Releases</th>
    <th>Snapshots</th>
    <th>${$.i18n.prop('managedrepository.actions')}</th>
    <th>${$.i18n.prop('edit')}</th>
    <th>${$.i18n.prop('delete')}</th>
    <th>${$.i18n.prop('modified')}</th>
    <th>${$.i18n.prop('managed.repository.rss.header')}</th>
    <th title="${$.i18n.prop('managedrepository.stats')}">${$.i18n.prop('managedrepository.stats.grid.header')}</th>
  </tr>
  </thead>
  <tbody>
  {{each(i, row) itemsOnCurrentPage()}}
  <tr data-bind="css:{ 'modified': row.modified()}">
    {{each(j, columnDefinition) columns}}
    <td>
      ${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }
    </td>
    {{/each}}
    <td>
      {{if row.releases() == true}}
      <img src="images/weather-clear-22-22.png" title="${$.i18n.prop('release.included')}"/>
      {{else}}
      <img src="images/dialog-error-22-22.png" title="${$.i18n.prop('release.notincluded')}"/>
      {{/if}}
    </td>

    <td>
      {{if row.snapshots() == true}}
      <img src="images/weather-clear-22-22.png" title="${$.i18n.prop('snapshots.included')}"/>
      {{else}}
      <img src="images/dialog-error-22-22.png" title="${$.i18n.prop('snapshots.notincluded')}"/>
      {{/if}}
    </td>
    <td>
      <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Actions<span class="caret"></span> </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#" data-bind="click: function(){ scanNow(row) }">
              <span class="btn btn-success">
                <i class="icon-refresh icon-white"></i>
              </span>
              ${$.i18n.prop('managedrepository.scan.grid.header')}
            </a>
          </li>
          <li>
            <a href="#" data-bind="click: function(){directoriesScan(row)}">
              <span class="btn btn-warning">
                <i class="icon-wrench icon-white"></i>
              </span>
              ${$.i18n.prop('managedrepository.scan.directories.grid.header')}
            </a>
          </li>
          <li>
            <a href="#" data-bind="click: function(){ showPomSnippet(row) }">
              <span class="btn btn-info">
                <i class="icon-user icon-white"></i>
              </span>
              ${$.i18n.prop('managedrepository.pomsnippet')}
            </a>
          </li>
          <li>
            {{if row.stageRepoNeeded()}}
            stage
            {{/if}}
          </li>
          <li>
            <!-- todo check archiva-merge-repository operation -->
            <a href="#" data-bind="click: function(){ mergeRepo(row) }">
              <span class="btn btn-info">
                <i class="icon-share icon-white"></i>
              </span>
              ${$.i18n.prop('managedrepository.mergerepo')}
            </a>
          </li>
        </ul>
      </div>
    </td>
    <td>
      <a href="#" data-bind="click: function(){ editManagedRepository(row) }">
        <span class="btn btn-primary">
          <i class="icon-pencil icon-white"/>
        </span>
      </a>
    </td>
    <td>
      <a href="#" data-bind="click: function(){ removeManagedRepository(row) }">
        <span class="btn btn-danger">
          <i class="icon-trash icon-white"/>
        </span>
      </a>
    </td>
    {{if row.modified()}}
    <td>
      <a href="#" class="btn btn-warning" data-bind="click: function(){ updateManagedRepository(row) }">${$.i18n.prop('save')}</a>
    </td>
    {{else}}
    <td></td>
    {{/if}}
    <td>
      <a href="${row.feedsUrl}"><img src="images/atom.gif" alt=""
                                     title="${$.i18n.prop('managedrepository.feeds')} ${row.name()}"/></a>
    </td>
    <td id="managedrepository-stats-${row.id()}">
      <img src="images/utilities-system-monitor-22-22.png"
           data-original-title="${$.i18n.prop('managedrepository.stats')}"
           data-bind="event: { mouseover: function(){ showStats(row) }, mouseout: function(){ hideStats(row) },}"
           id="managedrepository-stats-img-${row.id()}"/>
    </td>
  </tr>
  {{/each}}
  </tbody>

</script>

<script id="managed-repository-edit-tmpl" type='text/html'>
  <form id="managed-repository-edit-form" class="well form-horizontal">
    <fieldset id="managed-repository-edit-fieldset">
      <div class="control-group">
        <label class="control-label" for="id">${$.i18n.prop('identifier')}</label>

        <div class="controls">
          {{if update}}
          <span class="uneditable-input">${$data.managedRepository.id}</span>
          {{else}}
          <input type="text" class="input-xlarge required" id="id" name="id" size="50"
                 data-bind="value: managedRepository.id,css:{'uneditable-input': update},readonly:update"/>
          {{/if}}
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-id-info-button"
             data-original-title="${$.i18n.prop('managedRepository.id.help.title')}"
             data-content="${$.i18n.prop('managedRepository.id.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="name">${$.i18n.prop('name')}</label>

        <div class="controls">
          <input type="text" class="input-xlarge required" id="name" name="name" size="50"
                 data-bind="value: managedRepository.name"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-name-info-button"
             data-original-title="${$.i18n.prop('managedRepository.name.help.title')}"
             data-content="${$.i18n.prop('managedRepository.name.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="location">${$.i18n.prop('directory')}</label>

        <div class="controls">
          <input type="text" class="input-xxlarge required" id="location" name="location" size="50"
                 data-bind="value: managedRepository.location"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-location-info-button"
             data-original-title="${$.i18n.prop('managedRepository.location.help.title')}"
             data-content="${$.i18n.prop('managedRepository.location.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="indexDirectory">${$.i18n.prop('index.directory')}</label>

        <div class="controls">
          <input type="text" class="input-xxlarge" id="indexDirectory" name="indexDirectory" size="50"
                 data-bind="value: managedRepository.indexDirectory"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-indexDirectory-info-button"
             data-original-title="${$.i18n.prop('managedRepository.indexDirectory.help.title')}"
             data-content="${$.i18n.prop('managedRepository.indexDirectory.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="layout">${$.i18n.prop('type')}</label>

        <div class="controls">
          <select id="layout"
                  data-bind="options: availableLayouts,optionsText: 'label',optionsValue:'type',value: managedRepository.layout"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="cronExpression">${$.i18n.prop('cronExpression')}</label>

        <div class="controls">
          <input type="text" id="cronExpression" class="required" name="cronExpression" size="40"
                 data-bind="value: managedRepository.cronExpression"/>
          <a class="btn btn-warning btn-mini popover-doc" id="cronExpression-info-button"
             data-original-title="${$.i18n.prop('cronExpression.help.title')}"
             data-content="${$.i18n.prop('cronExpression.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="retentionPeriod">${$.i18n.prop('retentionPeriod')}</label>

        <div class="controls">
          <input type="text" id="retentionPeriod" class="digits" name="retentionPeriod" size="5"
                 data-bind="value: managedRepository.retentionPeriod"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-retentionPeriod-info-button"
             data-original-title="${$.i18n.prop('managedRepository.retentionPeriod.help.title')}"
             data-content="${$.i18n.prop('managedRepository.retentionPeriod.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="retentionCount">${$.i18n.prop('retentionCount')}</label>

        <div class="controls">
          <input type="text" id="retentionCount" name="retentionCount" size="5"
                 data-bind="value: managedRepository.retentionCount"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-retentionCount-info-button"
             data-original-title="${$.i18n.prop('managedRepository.retentionCount.help.title')}"
             data-content="${$.i18n.prop('managedRepository.retentionCount.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="description">${$.i18n.prop('description')}</label>

        <div class="controls">
          <textarea rows="3" id="description" name="description"
                    data-bind="value: managedRepository.description"></textarea>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-description-info-button"
             data-original-title="${$.i18n.prop('managedRepository.description.help.title')}"
             data-content="${$.i18n.prop('managedRepository.description.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="releases">${$.i18n.prop('releases')}</label>

        <div class="controls">
          <input type="checkbox" id="releases" name="releases" size="5"
                 data-bind="checked: managedRepository.releases"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-release-info-button"
             data-original-title="${$.i18n.prop('managedRepository.release.help.title')}"
             data-content="${$.i18n.prop('managedRepository.release.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="snapshots">${$.i18n.prop('snapshots')}</label>

        <div class="controls">
          <input type="checkbox" id="snapshots" name="snapshots" size="5"
                 data-bind="checked: managedRepository.snapshots"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-snapshots-info-button"
             data-original-title="${$.i18n.prop('managedRepository.snapshots.help.title')}"
             data-content="${$.i18n.prop('managedRepository.snapshots.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="blockRedeployments">${$.i18n.prop('blockRedeployments')}</label>

        <div class="controls">
          <input type="checkbox" id="blockRedeployments" name="blockRedeployments" size="5"
                 data-bind="checked: managedRepository.blockRedeployments"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-blockRedeployments-info-button"
             data-original-title="${$.i18n.prop('managedRepository.blockRedeployments.help.title')}"
             data-content="${$.i18n.prop('managedRepository.blockRedeployments.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="scanned">${$.i18n.prop('scanned')}</label>

        <div class="controls">
          <input type="checkbox" id="scanned" name="scanned" size="5" data-bind="checked: managedRepository.scanned"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-scanned-info-button"
             data-original-title="${$.i18n.prop('managedRepository.scanned.help.title')}"
             data-content="${$.i18n.prop('managedRepository.scanned.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="deleteReleasedSnapshots">${$.i18n.prop('deleteReleasedSnapshots')}</label>

        <div class="controls">
          <input type="checkbox" id="deleteReleasedSnapshots" name="deleteReleasedSnapshots" size="5"
                 data-bind="checked: managedRepository.deleteReleasedSnapshots"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-deleteReleasedSnapshots-info-button"
             data-original-title="${$.i18n.prop('managedRepository.deleteReleasedSnapshots.help.title')}"
             data-content="${$.i18n.prop('managedRepository.deleteReleasedSnapshots.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="stageRepoNeeded">${$.i18n.prop('stageRepoNeeded')}</label>

        <div class="controls">
          <input type="checkbox" id="stageRepoNeeded" name="stageRepoNeeded" size="5"
                 data-bind="checked: managedRepository.stageRepoNeeded"/>
          <a class="btn btn-warning btn-mini popover-doc" id="managedRepository-stageRepoNeeded-info-button"
             data-original-title="${$.i18n.prop('managedRepository.stageRepoNeeded.help.title')}"
             data-content="${$.i18n.prop('managedRepository.stageRepoNeeded.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="skipPackedIndexCreation">${$.i18n.prop('skipPackedIndexCreation')}</label>

        <div class="controls">
          <input type="checkbox" id="skipPackedIndexCreation" name="skipPackedIndexCreation" size="5"
                 data-bind="checked: managedRepository.skipPackedIndexCreation"/>
          <a class="btn btn-warning btn-mini popover-doc" id="skipPackedIndexCreation-info-button"
             data-original-title="${$.i18n.prop('skipPackedIndexCreation.help.title')}"
             data-content="${$.i18n.prop('skipPackedIndexCreation.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>

    </fieldset>
    <button data-bind="click: save" class="btn" id="managed-repository-save-button">${$.i18n.prop('save')}</button>
    <button data-bind="click: displayGrid" class="btn">${$.i18n.prop('cancel')}</button>
  </form>
</script>

<script id="managed-repository-delete-warning-tmpl" type='text/html'>
  <div>
    <span class="label label-warning">${$.i18n.prop('warning.not.undone.operation')}</span>

    <div>
      <span><strong>${$.i18n.prop('managedrepository.delete.warning.message')}</strong>.</span>

      <div>${$.i18n.prop('id')}: ${id()}</div>
      <div>${$.i18n.prop('name')}: ${name()}</div>
    </div>
    <div>
      ${$.i18n.prop('managedrepository.delete.content')}: <input type="checkbox" id="managedrepository-deletecontent">
    </div>
  </div>
</script>

<script type="text/html" id="remote-repository-delete-modal-tmpl">
  <div>
    <span class="label label-warning">${$.i18n.prop('warning.not.undone.operation')}</span>
  </div>
</script>

<script id="managed-repository-location-warning-tmpl" type='text/html'>
  <div>
    <span class="label label-warning">${$.i18n.prop('managedrepository.location.already.exists')}</span>

    <div>
      <span><strong>${$.i18n.prop('managedrepository.location.already.exists.warning.message')}</strong>.</span>

      <div>${$.i18n.prop('id')}: ${id()}</div>
      <div>${$.i18n.prop('name')}: ${name()}</div>
    </div>
  </div>
</script>
<script id="managed-repository-scan-now-modal-tmpl" type='text/html'>
  <div>
    ${$.i18n.prop('managedrepository.scan.all')}: <input type="checkbox" id="managed-repository-scan-now-all">
  </div>
</script>
<script id="managed-repository-stats-tmpl" type='text/html'>
  <div id="managedrepository-stats-${managedRepository.id()}-popover" style="display:none">
    <div>${$.i18n.prop('managedrepository.stats.endTime')}: ${lastScanDate()}</div>
    <div>${$.i18n.prop('managedrepository.stats.duration')}: ${duration()}ms</div>
    <div>${$.i18n.prop('managedrepository.stats.totalFileCount')}: ${totalFileCount()}</div>
    <div>${$.i18n.prop('managedrepository.stats.newFileCount')}: ${newFileCount()}</div>
  </div>
</script>
<script id="pom-snippet-tmpl" type='text/html'>
  <div class="page-header">
    <h2>POM Snippet</h2></div>
  </div>
  <div><a onclick="$('#managed-repositories-pom-snippet').effect('blind')">${$.i18n.prop('hide')}</a></div>
  <pre>${$data}</pre>
</script>

<!-- remote part -->

<script id='ko_remote-repositoriesGrid' type='text/html'>
  <thead>
  <tr>
    {{each(i, columnDefinition) columns}}
    <th title="${ columnDefinition.title }">${ columnDefinition.headerText }</th>
    {{/each}}
    <th>${$.i18n.prop('edit')}</th>
    <th>${$.i18n.prop('delete')}</th>
    <th>${$.i18n.prop('modified')}</th>
    <th>${$.i18n.prop('description')}</th>
    <th>${$.i18n.prop('remoterepository.downloadremoteindex')}</th>
    <th>${$.i18n.prop('remoterepository.remotecheck')}</th>
  </tr>
  </thead>
  <tbody>
  {{each(i, row) itemsOnCurrentPage()}}
  <tr data-bind="css:{ 'modified': row.modified()}">
    {{each(j, columnDefinition) columns}}
    <td>
      ${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }
    </td>
    {{/each}}
    <td>
      <a href="#" data-bind="click: function(){ editRemoteRepository(row) }">
                <span class="btn btn-primary">
                  <i class="icon-pencil icon-white"/>
                </span>
      </a>
    </td>
    <td>
      <a href="#" data-bind="click: function(){ removeRemoteRepository(row) }">
                <span class="btn btn-danger">
                  <i class="icon-trash icon-white"/>
                </span>
      </a>
    </td>
    {{if row.modified()}}
    <td>
      <a href="#" class="btn btn-warning" data-bind="click: function(){ updateRemoteRepository(row) }">${$.i18n.prop('save')}</a>
    </td>
    {{else}}
    <td></td>
    {{/if}}
    <td>
      {{if row.description()}}
      <a class="btn btn-warning btn-mini popover-doc" id="remoterepo-description-help"
         data-content="${row.description()}" data-title="${$.i18n.prop('description')}">
        <i class="icon-question-sign icon-white"></i>
      </a>
      {{/if}}
    </td>
    <td>
      <a href="#" data-bind="click: function(){ scheduleDownloadRemoteIndex(row) }">
                <span class="btn btn-success">
                  <i class="icon-refresh icon-white"/>
                </span>
      </a>
    </td>
    <td>
      <img class="remote-check" id="remote-check-${row.id()}" src="images/small-spinner.gif"/>
    </td>
  </tr>
  {{/each}}
  </tbody>

</script>


<script id="remote-repository-edit-tmpl" type='text/html'>


  <form id="remote-repository-edit-form" class="well form-horizontal">
    <fieldset id="remote-repository-edit-fieldset">
      <div class="control-group">
        <label class="control-label" for="id">${$.i18n.prop('identifier')}</label>

        <div class="controls">
          {{if update}}
          <span class="uneditable-input">${$data.remoteRepository.id}</span>
          {{else}}
          <input type="text" class="input-xlarge required" id="id" name="id" size="50"
                 data-bind="value: remoteRepository.id,css:{'uneditable-input': update},readonly:update"/>
          {{/if}}
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="name">${$.i18n.prop('name')}</label>

        <div class="controls">
          <input type="text" class="input-xlarge required" id="name" name="name" size="50"
                 data-bind="value: remoteRepository.name"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="url">${$.i18n.prop('url')}</label>

        <div class="controls">
          <input type="text" class="input-xxlarge required" id="url" name="location" size="50"
                 data-bind="value: remoteRepository.url"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="userName">${$.i18n.prop('username')}</label>

        <div class="controls">
          <input type="text" class="input-xlarge" id="userName" name="userName" size="50"
                 data-bind="value: remoteRepository.userName"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-userName-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.userName.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.userName.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="password">${$.i18n.prop('password')}</label>
        <div class="controls">
          <input type="password" class="input-xlarge" id="password" name="password" size="50"
                 data-bind="value: remoteRepository.password"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-password-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.password.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.password.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="timeout">${$.i18n.prop('timeout')}</label>

        <div class="controls">
          <input type="text" id="timeout" class="digits" name="retentionPeriod" size="5"
                 data-bind="value: remoteRepository.timeout"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-timeout-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.timeout.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.timeout.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="layout">${$.i18n.prop('type')}</label>

        <div class="controls">
          <select id="layout"
                  data-bind="options: availableLayouts,optionsText: 'label',optionsValue:'type',value: remoteRepository.layout"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="downloadRemoteIndex">${$.i18n.prop('downloadRemoteIndex')}</label>

        <div class="controls">
          <input type="checkbox" id="downloadRemoteIndex" name="downloadRemoteIndex" size="5"
                 data-bind="checked: remoteRepository.downloadRemoteIndex"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-downloadRemoteIndex-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.downloadRemoteIndex.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.downloadRemoteIndex.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="remoteIndexUrl">${$.i18n.prop('remoteIndexUrl')}</label>

        <div class="controls">
          <input type="text" class="input-xxlarge" id="remoteIndexUrl" name="remoteIndexUrl" size="5"
                 data-bind="value: remoteRepository.remoteIndexUrl"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-remoteIndexUrl-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.remoteIndexUrl.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.remoteIndexUrl.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="cronExpression">${$.i18n.prop('cronExpression')}</label>

        <div class="controls">
          <input type="text" id="cronExpression" name="cronExpression" size="40"
                 data-bind="value: remoteRepository.cronExpression"/>
          <a class="btn btn-warning btn-mini popover-doc" id="cronExpression-info-button"
             data-original-title="${$.i18n.prop('cronExpression.help.title')}"
             data-content="${$.i18n.prop('cronExpression.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="indexDirectory">${$.i18n.prop('index.directory')}</label>

        <div class="controls">
          <input type="text" class="input-xlarge" id="indexDirectory" name="indexDirectory" size="50"
                 data-bind="value: remoteRepository.indexDirectory"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-indexDirectory-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.indexDirectory.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.indexDirectory.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="remoteDownloadTimeout">${$.i18n.prop('remoteDownloadTimeout')}</label>

        <div class="controls">
          <input type="text" id="remoteDownloadTimeout" class="digits" name="remoteDownloadTimeout" size="5"
                 data-bind="value: remoteRepository.remoteDownloadTimeout"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-remoteDownloadTimeout-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.remoteDownloadTimeout.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.remoteDownloadTimeout.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label"
               for="remoteDownloadNetworkProxyId">${$.i18n.prop('remoteDownloadNetworkProxyId')}</label>

        <div class="controls">
          <select id="remoteDownloadNetworkProxyId"
                  data-bind="options: networkProxies, optionsText: 'id',optionsValue:'id', value: remoteRepository.remoteDownloadNetworkProxyId, optionsCaption: 'Choose...'"></select>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-remoteDownloadNetworkProxyId-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.remoteDownloadNetworkProxyId.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.remoteDownloadNetworkProxyId.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label"
               for="downloadRemoteIndexOnStartup">${$.i18n.prop('downloadRemoteIndexOnStartup')}</label>

        <div class="controls">
          <input type="checkbox" id="downloadRemoteIndexOnStartup" name="downloadRemoteIndexOnStartup"
                 data-bind="checked: remoteRepository.downloadRemoteIndexOnStartup"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-remoteDownloadNetworkProxyId-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.remoteDownloadNetworkProxyId.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.remoteDownloadNetworkProxyId.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="description">${$.i18n.prop('description')}</label>

        <div class="controls">
          <textarea rows="3" id="description" name="description"
                    data-bind="value: remoteRepository.description"></textarea>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-description-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.description.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.description.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="checkPath">${$.i18n.prop('remoteRepository.checkPath')}</label>

        <div class="controls">
          <input type="text" class="input-xxlarge" id="checkPath" name="checkPath"
                 data-bind="value: remoteRepository.checkPath"/>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-checkPath-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.checkPath.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.checkPath.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
        </div>
      </div>

      <div class="row-fluid">
        <div class="control-group span6">
          <strong>${$.i18n.prop('remoteRepository.extraParametersEntries')}</strong>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-extraParametersEntries-info-button"
               data-original-title="${$.i18n.prop('remoteRepository.extraParametersEntries.help.title')}"
               data-content="${$.i18n.prop('remoteRepository.extraParametersEntries.help.content')}">
              <i class="icon-question-sign icon-white"></i>
          </a>

          <div id="extra-parameters-error"></div>
          <table class="table">
            <thead>
            <th>${$.i18n.prop('key')}:<input type="text" id="extraParameter-key"/></th>
            <th>${$.i18n.prop('value')}:<input type="text" id="extraParameter-value"/></th>
            <th><a href="#" data-bind="click: function(){ addExtraParameter() }">${$.i18n.prop('add')}</a></th>
            </thead>
            <tbody>
            {{each(i, extraParameterEntry) remoteRepository.extraParametersEntries}}
            <tr>
              <td>${extraParameterEntry.key}</td>
              <td>${extraParameterEntry.value}</td>
              <td><a href="#" data-bind="click: function(){ deleteExtraParameter(extraParameterEntry.key)}">${$.i18n.prop('delete')}</a>
              </td>
            </tr>
            {{/each}}
            </tbody>
          </table>
        </div>
      </div>

      <div class="row-fluid">
        <div class="control-group span6">
          <strong>${$.i18n.prop('remoteRepository.extraHeadersEntries')}</strong>
          <a class="btn btn-warning btn-mini popover-doc" id="remoteRepository-extraHeadersEntries-info-button"
             data-original-title="${$.i18n.prop('remoteRepository.extraHeadersEntries.help.title')}"
             data-content="${$.i18n.prop('remoteRepository.extraHeadersEntries.help.content')}">
            <i class="icon-question-sign icon-white"></i>
          </a>
          <div id="extra-headers-error"></div>
          <table class="table">
            <thead>
            <th>${$.i18n.prop('key')}:<input type="text" id="extraHeader-key"/></th>
            <th>${$.i18n.prop('value')}:<input type="text" id="extraHeader-value"/></th>
            <th><a href="#" data-bind="click: function(){ addExtraHeader() }">${$.i18n.prop('add')}</a></th>
            </thead>
            <tbody>
            {{each(i, extraHeaderEntry) remoteRepository.extraHeadersEntries}}
            <tr>
              <td>${extraHeaderEntry.key}</td>
              <td>${extraHeaderEntry.value}</td>
              <td><a href="#" data-bind="click: function(){ deleteExtraHeader(extraHeaderEntry.key)}">${$.i18n.prop('delete')}</a>
              </td>
            </tr>
            {{/each}}
            </tbody>
          </table>
        </div>
      </div>

    </fieldset>
    <button data-bind="click: save" data-loading-text="${$.i18n.prop('common.loading')}"
            id="remote-repository-save-button" class="btn">${$.i18n.prop('save')}
    </button>
    <button data-bind="click: displayGrid" class="btn">${$.i18n.prop('cancel')}</button>
  </form>
</script>

<script id="remote-repository-scan-modal-tmpl" type='text/html'>
  <div>
    ${$.i18n.prop('remoterepository.download.remote.now')}: <input type="checkbox" id="remoterepository-scan-now">
  </div>
  <div>
    ${$.i18n.prop('remoterepository.download.remote.full')}: <input type="checkbox" id="remoterepository-scan-full">
  </div>
</script>

<script id="managed-repositories-bulk-save-tmpl" type='text/html'>
  {{if bulkSave()}}
  <a data-bind="click: updateModifiedManagedRepositories" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
  {{/if}}
</script>

<script id="remote-repositories-bulk-save-tmpl" type='text/html'>
  {{if bulkSave()}}
  <a data-bind="click: updateModifiedRemoteRepositories" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
  {{/if}}
</script>

<script id="networkProxiesMain" type="text/html">
  <div class="page-header">
    <h2><img src="images/internet-web-browser-32-32.png"/>${$.i18n.prop('network-proxies.list')}</h2>
  </div>

  <ul id="network-proxies-view-tabs" class="nav nav-tabs">
    <li id="network-proxies-view-tabs-li-grid">
      <a data-toggle="tab" href="#network-proxies-view" id="network-proxies-view-tabs-a-network-proxies-grid">${$.i18n.prop('network-proxies.grid.tab.title')}</a>
    </li>
    <li id="network-proxies-view-tabs-li-edit">
      <a data-toggle="tab" href="#network-proxies-edit">${$.i18n.prop('add')}</a>
    </li>
  </ul>
  <div id="network-proxies-view-tabs-content" class="tab-content">
    <div id="network-proxies-view" class="tab-pane">
      <div id="network-proxies-bulk-save-btn" data-bind='template:{name:"network-proxies-bulk-save-tmpl"}'></div>
      <table class="table table-striped table-bordered" id="networkProxiesTable"
             data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko-network-proxies-grid',pageLinksId:'network-proxiesPagination'">
      </table>
      <div id="network-proxiesPagination"></div>
    </div>
    <div id="network-proxies-edit" class="tab-pane" data-bind='template: {name:"network-proxy-edit-tmpl"}'></div>
  </div>

</script>

<script id='ko-network-proxies-grid' type='text/html'>
  <thead>
  <tr>
    {{each(i, columnDefinition) columns}}
    <th>${ columnDefinition.headerText }</th>
    {{/each}}
    <th>${$.i18n.prop('password')}</th>
    <th>${$.i18n.prop('network.proxy.useNtlm')}</th>
    <th>${$.i18n.prop('edit')}</th>
    <th>${$.i18n.prop('delete')}</th>
    <th>${$.i18n.prop('modified')}</th>
  </tr>
  </thead>
  <tbody>
  {{each(i, row) itemsOnCurrentPage()}}
  <tr data-bind="css:{ 'modified': row.modified()}">
    {{each(j, columnDefinition) columns}}
    {{var val = (typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) :
    row[columnDefinition.rowText])}}
    <td>
      ${val}
    </td>
    {{/each}}
    {{if row.password()}}
    <td>*****</td>
    {{else}}
    <td></td>
    {{/if}}
    <td>${row.useNtlm()}</td>
    <td>
      <a href="#" data-bind="click: function(){ editNetworkProxy(row) }">
        <span class="btn btn-primary">
          <i class="icon-pencil icon-white"/>
        </span>
      </a>
    </td>
    <td>
      <a href="#" data-bind="click: function(){ removeNetworkProxy(row) }">
        <span class="btn btn-danger">
          <i class="icon-trash icon-white"/>
        </span>
      </a>
    </td>
    {{if row.modified()}}
    <td>
      <a href="#" data-bind="click: function(){ updateNetworkProxy(row) }" class="btn btn-warning">${$.i18n.prop('save')}</a>
    </td>
    {{else}}
    <td></td>
    {{/if}}

  </tr>
  {{/each}}
  </tbody>

</script>

<script id="network-proxy-edit-tmpl" type='text/html'>
  <form id="network-proxy-edit-form" class="well form-horizontal">
    <fieldset id="network-proxy-edit-fieldset">
      <div class="control-group">
        <label class="control-label" for="id">${$.i18n.prop('identifier')}</label>

        <div class="controls">
          {{if update}}
          <span class="uneditable-input">${$data.networkProxy.id}</span>
          {{else}}
          <input type="text" class="xlarge" id="id" name="id" size="10"
                 data-bind="value: networkProxy.id,css:{'uneditable-input': update},readonly:update"/>
          {{/if}}
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="protocol">${$.i18n.prop('protocol')}</label>

        <div class="controls">
          <input type="text" class="xlarge required" id="protocol" name="protocol" size="8"
                 data-bind="value: networkProxy.protocol"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="host">${$.i18n.prop('host')}</label>

        <div class="controls">
          <input type="text" class="xlarge required" id="host" name="host" size="15"
                 data-bind="value: networkProxy.host"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="port">${$.i18n.prop('port')}</label>

        <div class="controls">
          <input type="text" class="xlarge required digits" id="port" name="port" size="6"
                 data-bind="value: networkProxy.port"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="username">${$.i18n.prop('username')}</label>

        <div class="controls">
          <input type="text" class="xlarge" id="username" name="username" size="50"
                 data-bind="value: networkProxy.username"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="password">${$.i18n.prop('password')}</label>

        <div class="controls">
          <input type="password" class="xlarge" id="password" name="password" size="50"
                 data-bind="value: networkProxy.password"/>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="useNtlm">${$.i18n.prop('network.proxy.useNtlm')}</label>

        <div class="controls">
          <input type="checkbox" id="useNtlm" name="useNtlm" data-bind="checked: networkProxy.useNtlm"/>
        </div>
      </div>

    </fieldset>
    <button id="network-proxy-btn-save" data-bind="click: save" class="btn">${$.i18n.prop('save')}</button>
    {{if networkProxy.modified()}}
    ${("#network-proxy-btn-save").button('reset')}
    {{/if}}
    <button data-bind="click: displayGrid" class="btn">${$.i18n.prop('cancel')}</button>
  </form>
</script>

<script id="network-proxies-bulk-save-tmpl" type='text/html'>
  {{if bulkSave()}}
  <a data-bind="click: updateModifiedNetworkProxies" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
  {{/if}}
</script>
<script id="network-proxy-delete-warning-tmpl" type='text/html'>
  <div>
    <span class="label label-warning">${$.i18n.prop('warning.not.undone.operation')}</span>
  </div>
</script>

<script id="proxyConnectorsMain" type="text/html">
  <div class="page-header">
    <h2><img src="images/preferences-system-network-proxy-32-32.png"/>${$.i18n.prop('proxy-connectors.list')}</h2>
  </div>

  <ul id="proxy-connectors-view-tabs" class="nav nav-tabs">
    <li id="proxy-connectors-view-tabs-li-grid" class="active">
      <a data-toggle="tab" href="#proxy-connectors-view" id="proxy-connectors-view-tabs-a-network-proxies-grid">${$.i18n.prop('proxy-connectors.grid.tab.title')}</a>
    </li>
    <li id="proxy-connectors-view-tabs-li-edit">
      <a data-toggle="tab" href="#proxy-connectors-edit"
         id="proxy-connectors-view-tabs-a-edit">${$.i18n.prop('add')}</a>
    </li>
    <li id="proxy-connectors-view-tabs-li-edit-order">
      <a data-toggle="tab" href="#proxy-connectors-edit-order" id="proxy-connectors-view-tabs-a-edit-order">${$.i18n.prop('proxy-connectors.grid.tab.edit.order')}</a>
    </li>
  </ul>
  <div id="proxy-connectors-view-tabs-content" class="tab-content">
    <div id="proxy-connectors-view" class="tab-pane active">
      <div id="proxy-connectors-bulk-save-btn" data-bind='template:{name:"proxy-connectors-bulk-save-tmpl"}'></div>
      <table class="table table-striped table-bordered" id="proxyConnectorsTable"
             data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko-proxy-connectors-grid',pageLinksId:'proxy-connectorsPagination'">
      </table>
      <div id="proxy-connectorsPagination"></div>
    </div>
    <div id="proxy-connectors-edit" class="tab-pane"></div>
    <div id="proxy-connector-edit-order" class="tab-pane span8">
      <div id="proxy-connector-edit-order-managed-repository-div"
           data-bind='template:{name:"proxy-connector-edit-order-managed-repository-tmpl"}'></div>
      <div id="proxy-connector-edit-order-div"
           data-bind="sortable: { template: 'proxy-connector-edit-order-tmpl', data: proxyConnectors,afterMove: proxyConnectorMoved}">
      </div>
    </div>
  </div>

</script>

<script id='ko-proxy-connectors-grid' type='text/html'>
  <thead>
  <tr>
    <th>${$.i18n.prop('proxy-connectors.grid.managedrepo.grid.header')}</th>
    <th>${$.i18n.prop('proxy-connectors.grid.remoterepo.grid.header')}</th>
    <th>${$.i18n.prop('proxy-connectors.grid.remoterepo.settings.popover.title')}</th>
    <th>${$.i18n.prop('edit')}</th>
    <th>${$.i18n.prop('delete')}</th>
    <th>${$.i18n.prop('save')}</th>
    <th>${$.i18n.prop('proxy-connectors.grid.header.order')}</th>
  </tr>
  </thead>
  <tbody>
  {{each(i, row) itemsOnCurrentPage()}}
  <tr data-bind="css:{ 'modified': row.modified()}">
    <td>${row.sourceRepoId()}</td>
    <td>${row.targetRepoId()}</td>
    <td>
      <a class="btn btn-info btn-mini"
         id="proxy-connectors-grid-remoterepo-settings-edit-${row.sourceRepoId()}-${row.targetRepoId()}"
         data-original-title="${$.i18n.prop('proxy-connectors.grid.remoterepo.settings.popover.title')}"
         data-content="${buildSettings(row)}" data-bind="click: showSettings" data-html="true">
        <i class="icon-question-sign icon-white"></i>
      </a>

    </td>
    <td>
      <a data-bind="click: function(){ editProxyConnector(row)}" href="#">
          <span class="btn btn-primary">
            <i class="icon-pencil icon-white"/>
          </span>
      </a>
    </td>
    <td>
      <a href="#" data-bind="click: function(){ deleteProxyConnector(row)}">
          <span class="btn btn-danger">
            <i class="icon-trash icon-white"/>
          </span>
      </a>
    </td>
    <td>
      {{if row.modified()}}
      <a href="#" class="btn btn-warning" data-bind="click: function(){ updateProxyConnector(row)}">
        ${$.i18n.prop('save')}
      </a>
      {{/if}}
    </td>
    <td>
      {{if orderChangeAware(row)}}
      <a href="#" data-bind="click: function(){ displayOrderEdit(row)}">
            <span class="btn btn-info">
              <i class="icon-resize-vertical icon-white"/>
               ${$.i18n.prop('proxy-connectors.order.edit')}
            </span>

      </a>
      <span class="badge badge-info">${row.order()}</span>
      {{/if}}
    </td>
  </tr>
  {{/each}}
  </tbody>
  <div id="proxy-connectors-grid-remoterepo-settings-content-${val}-${targetRepoId}" style="display:none"></div>
</script>

<script id='proxy-connectors-remote-settings-popover-tmpl' type='text/html'>
  <span>
    {{if proxyId}}
      ${$.i18n.prop('proxy-connectors.remoterepo.settings.networkproxy')}: ${proxyConnector.proxyId}
    {{else}}
      ${$.i18n.prop('proxy-connectors.remoterepo.settings.networkproxy')}: ${$.i18n.prop('none')}
    {{/if}}
    <table class="table table-bordered">
      <thead>
      <th colspan="2">${$.i18n.prop('proxy-connector.policies')}</th>
      </thead>
      <tbody>
      {{each(i, entry) proxyConnector.policiesEntries}}
      {{var name = proxyConnectorsViewModel.findPolicyInformationName(entry.key)}}
      <tr>
        <td>${name}</td>
        <td>${entry.value}</td>
      </tr>
      {{/each}}
      </tbody>
    </table>
  </span>
</script>

<script id="proxy-connector-edit-form-tmpl" type='text/html'>

  <form id="proxy-connector-edit-form" class="well form-horizontal">
    <fieldset id="remote-repository-edit-fieldset">
      <div class="control-group">
        <label class="control-label" for="proxyId">${$.i18n.prop('proxy-connector.network-proxy.id')}</label>

        <div class="controls">
          <select id="proxyId" class="input-xlarge"
                  data-bind="options: proxyConnectorsViewModel.networkProxies, optionsText: 'id',optionsValue:'id',
                     value: proxyConnector.proxyId, optionsCaption: 'direct connection'"></select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="proxyId">${$.i18n.prop('proxy-connector.managed.repository.id')}</label>

        <div class="controls">
          <select id="sourceRepoId" class="input-xlarge"
                  data-bind="options: proxyConnectorsViewModel.managedRepositories, optionsText: 'id',optionsValue:'id',
                      value: proxyConnector.sourceRepoId,attr: {disabled: isUpdate() }"></select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="proxyId">${$.i18n.prop('proxy-connector.remote.repository.id')}</label>

        <div class="controls">
          <select id="targetRepoId" class="input-xlarge"
                  data-bind="options: proxyConnectorsViewModel.remoteRepositories, optionsText: 'id',optionsValue:'id',
                     value: proxyConnector.targetRepoId,attr: {disabled: isUpdate() }"></select>
        </div>
      </div>
      <div class="row-fluid">
        <div class="control-group span6">
          <table class="table">
            <thead>
            <th colspan="2">${$.i18n.prop('proxy-connector.policies')}</th>
            </thead>
            <tbody data-bind="foreach: proxyConnectorsViewModel.policyInformations()">
            <tr>
              <td data-bind="text: name"></td>
              <td>
                <select data-bind="options: getPolicyOptions(id()),value:getSelectedPolicyOption(id()),
                              attr: { id: 'policy-'+id() },event: { change: function(){ changePolicyOption(id())},}">
                </select>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row-fluid">
        <div class="control-group span6">
          <h4>${$.i18n.prop('proxy-connector.properties')}</h4>
          <table class="table">
            <thead>
            <th><input type="text" id="property-key"/></th>
            <th><input type="text" id="property-value"/></th>
            <th><a href="#" data-bind="click: function(){ addProperty() }">${$.i18n.prop('add')}</a></th>
            </thead>
            <tbody data-bind="foreach: proxyConnector.propertiesEntries">
            <tr>
              <td data-bind="text: key"></td>
              <td data-bind="text: value"></td>
              <td><a href="#" data-bind="click: function(){ $parent.deleteProperty(key)}">${$.i18n.prop('delete')}</a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row-fluid">
        <div class="control-group span6">
          <h4>${$.i18n.prop('proxy-connector.blacklist')}</h4>
          <table class="table">
            <thead>
            <th><input type="text" id="blacklist-value"/></th>
            <th><a href="#" data-bind="click: function(){ addBlacklistPattern() }">${$.i18n.prop('add')}</a></th>
            </thead>
            <tbody data-bind="foreach: proxyConnector.blackListPatterns">
            <tr>
              <td data-bind="text: $data"></td>
              <td><a href="#" data-bind="click: function(){removeBlacklistPattern($data)}">${$.i18n.prop('delete')}</a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row-fluid">
        <div class="control-group span6">
          <h4>${$.i18n.prop('proxy-connector.whitelist')}</h4>
          <table class="table">
            <thead>
            <th><input type="text" id="whitelist-value"/></th>
            <th><a href="#" data-bind="click: function(){ addWhitelistPattern() }">${$.i18n.prop('add')}</a></th>
            </thead>
            <tbody data-bind="foreach: proxyConnector.whiteListPatterns">
            <tr>
              <td data-bind="text: $data"></td>
              <td><a href="#" data-bind="click: function(){removeWhitelistPattern($data)}">${$.i18n.prop('delete')}</a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </fieldset>

    <button id="proxy-connector-btn-save" data-bind="click: save" data-loading-text="${$.i18n.prop('common.loading')}"
            class="btn">${$.i18n.prop('save')}
    </button>
    {{if modified()}}
    ${("#network-proxy-btn-save").button('reset')}
    {{/if}}
    <button data-bind="click: displayGrid" class="btn">${$.i18n.prop('cancel')}</button>

  </form>

</script>
<script id="proxy-connectors-bulk-save-tmpl" type='text/html'>
  {{if bulkSave()}}
  <a data-bind="click: updateModifiedProxyConnectors" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
  {{/if}}
</script>

<script id="proxy-connector-edit-order-tmpl" type='text/html'>
  <div class="well draggable-item network-proxy-remote-item">
    {{var remoteRepository=$parent.findRemoteRepository(targetRepoId)}}
    <div class="row-fluid">
      <div class="span1">
        <img src="images/system-software-update-32-32.png"/>
        <br/>
        <img src="images/utilities-system-monitor-22-22.png"
             id="proxy-connectors-order-remoterepo-settings-edit-${sourceRepoId()}-${targetRepoId()}"
             data-original-title="${$.i18n.prop('proxy-connectors.grid.remoterepo.settings.popover.title')}"
             data-bind="event: { mouseover: function(){ displaySettings(sourceRepoId(),targetRepoId())},}">

        <div id="proxy-connectors-order-remoterepo-settings-content-${sourceRepoId()}-${targetRepoId()}"
             style="display:none"></div>
      </div>
      <div class="span6 pull-left">
        <blockquote>
          ${targetRepoId}
          <br/>
          ${remoteRepository.name()}&nbsp;(<a href="${remoteRepository.url()}"
                                              target="_blank">${remoteRepository.url()}</a>)
        </blockquote>
      </div>
      <div class="span2">
        <span class="badge badge-info">${order}</span>
      </div>
    </div>
  </div>
</script>

<script id="proxy-connector-edit-order-managed-repository-tmpl" type="text/html">
  <div class="well row-fluid">
    <div class="span1">
      <img src="images/applications-internet-32-32.png"/>
    </div>
    <div class="span6">
      <blockquote>
        ${managedRepository.id}
        <br/>
        ${managedRepository.name}
      </blockquote>
    </div>
    <div class="span2">
      {{if proxyConnectorsViewModel.bulkSave()}}
      <p>
        <a data-bind="click: function(){updateModifiedProxyConnectors()}"
           href="#" class="btn btn-warning">${$.i18n.prop('save.all')}</a></p>
      {{/if}}
    </div>
  </div>
</script>

<script id="proxy-connector-delete-warning-tmpl" type='text/html'>
  <div>
    <span class="label label-warning">${$.i18n.prop('warning.not.undone.operation')}</span>
  </div>
</script>

<script id="repositoryGroupsMain" type="text/html">
  <div class="page-header">
    <h2><img src="images/applications-internet-2-32-32.png"/>${$.i18n.prop('repository.groups.list')}</h2>
  </div>
  <ul id="repository-groups-view-tabs" class="nav nav-tabs">
    <li id="repository-groups-view-tabs-li-grid" class="active">
      <a data-toggle="tab" href="#repository-groups-view" id="repository-groups-view-tabs-a-network-proxies-grid">
        ${$.i18n.prop('repository-groups.grid.tab.title')}
      </a>
    </li>
    <li id="repository-groups-view-tabs-li-edit">
      <a data-toggle="tab" href="#repository-groups-edit"
         id="repository-groups-view-tabs-a-edit">${$.i18n.prop('add')}</a>
    </li>

  </ul>
  <div id="repository-groups-view-tabs-content" class="tab-content">
    <div id="repository-groups-view" class="tab-pane active">
      <div id="repository-groups-table" data-bind='template:{name:"repository-groups-table-tmpl"}'>
      </div>
    </div>
    <div id="repository-groups-edit" class="tab-pane">
      <div class="row-fluid">
        <div class="span6 dotted">
          <div id="repository-groups-edit-div" data-bind='template:{name:"repository-group-edit-tmpl"}'></div>
          <div id="repository-groups-edit-order-div" style="min-height: 80px"
               data-bind="sortable: { template: 'repository-group-edit-order-tmpl-chose',data:repositoryGroup.managedRepositories,afterMove:repositoryMoved}">
          </div>
        </div>

        <div class="span6 dotted">
          <h5>${$.i18n.prop('repository.groups.available.repositories')}</h5>
          <br/>

          <div id="repository-groups-edit-available-repositories" style="min-height: 80px"
               data-bind="sortable: { template: 'repository-group-edit-order-tmpl-available',data:availableRepositories,afterMove:repositoryMoved}">

          </div>
        </div>

      </div>

    </div>

  </div>
</script>

<script id="repository-group-edit-order-tmpl-chose" type="text/html">
  <div class="well draggable-item">
    <span class="pull-right">
      <i class="icon-minus-sign cursor-hand" id="minus-${$data.id()}"/>
    </span>
    <blockquote>
      ${$data.id()}
      <br/>
      ${$data.name()}
      <br/>
      <a href="${$data.url}" target="_blank">
        ${$data.url}
      </a>
      <br/>
    </blockquote>

  </div>
</script>

<script id="repository-group-edit-order-tmpl-available" type="text/html">
  <div class="well draggable-item">
    <span class="pull-right">
      <i class="icon-plus-sign cursor-hand" id="plus-${$data.id()}"/>
    </span>
    <blockquote>
      ${$data.id()}
      <br/>
      ${$data.name()}
      <br/>
      <a href="${$data.url}" target="_blank">
        ${$data.url}
      </a>
      <br/>
    </blockquote>

  </div>
</script>

<script id="repository-groups-table-tmpl" type="text/html">
  <table class="table table-striped table-bordered">
    <thead>
    <th>${$.i18n.prop('repository.groups.groups.grid.header')}</th>
    <th>${$.i18n.prop('repository.groups.repositories.grid.header')}</th>
    <th>${$.i18n.prop('edit')}</th>
    <th>${$.i18n.prop('delete')}</th>
    <th>${$.i18n.prop('save')}</th>
    </thead>
    <tbody>
    {{each(i, repositoryGroup) repositoryGroups}}
    <tr data-bind="css:{ 'modified': repositoryGroup.modified()}">
      <td>${repositoryGroup.id}</td>
      <td>
        <ul>
          {{each(j,id) repositoryGroup.repositories()}}
          <li>${id}</li>
          {{/each}}
        </ul>
      </td>
      <td>
        <a href="#" data-bind="click: function(){editRepositoryGroup(repositoryGroup)}">
            <span class="btn btn-primary">
              <i class="icon-pencil icon-white"/>
            </span>
        </a>
      </td>
      <td>
        <a href="#" data-bind="click: function(){deleteRepositoryGroup(repositoryGroup)}">
            <span class="btn btn-danger">
              <i class="icon-trash icon-white"/>
            </span>
        </a>
      </td>
      <td>
        <a href="#" class="btn btn-warning" data-bind="click: function(){saveRepositoryGroup(repositoryGroup)},css: { disabled: repositoryGroup.modified()==false }">
          ${$.i18n.prop('save')}
        </a>
      </td>
    </tr>
    {{/each}}
    </tbody>
  </table>
</script>

<script id="repository-group-edit-tmpl" type="text/html">
  <div class="row-fluid">

    <div class="dotted span8">
      <form id="repository-group-edit-form" class="well">
        <fieldset id="repository-group-edit-fieldset">
          <div class="control-group">
            <label class="control-label" for="id">${$.i18n.prop('identifier')}</label>
            <div class="controls">
              <input type="text" class="input-medium required" id="id" name="id" size="15"
                     data-bind="value: repositoryGroup.id,css:{'uneditable-input': update},readonly:update"/>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="mergedIndexPath">${$.i18n.prop('repository.group.mergedIndexPath')}</label>
              <div class="controls">
                <input type="text" class="input-large required" id="mergedIndexPath" name="mergedIndexPath"
                       data-bind="value: repositoryGroup.mergedIndexPath"/>
              </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="mergedIndexPath">${$.i18n.prop('repository.group.mergedIndexTtl')}</label>
            <div class="controls">
                <input type="text" class="input-large required" id="mergedIndexTtl" name="mergedIndexTtl"
                       data-bind="value: repositoryGroup.mergedIndexTtl"/>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="cronExpression">${$.i18n.prop('repository.group.cronExpression')}</label>
            <div class="controls">
              <input type="text" class="input-large" id="cronExpression" name="cronExpression"
                     data-bind="value: repositoryGroup.cronExpression"/>
            </div>
          </div>
          <div>
            {{if repositoryGroup.id()}}
            {{if applicationUrl && applicationUrl.trim().length>0 }}            
            <a href="${applicationUrl}/repository/${repositoryGroup.id()}" target="_blank">
              ${applicationUrl}/repository/${repositoryGroup.id()}
            </a>
            {{else}}
            <a href="${window.archivaRuntimeInfo.baseUrl}/repository/${repositoryGroup.id()}" target="_blank">
              ${window.archivaRuntimeInfo.baseUrl}/repository/${repositoryGroup.id()}
            </a>
            {{/if}}
            {{/if}}
          </div>
        </fieldset>
      </form>
    </div>


    <div class="span3">
      <a href="#" class="btn btn-warning" data-loading-text="${$.i18n.prop('common.loading')}"
         id="repository-group-save" data-bind="click: function(){saveRepositoryGroup(repositoryGroup)},css: { disabled: repositoryGroup.modified()==false }">${$.i18n.prop('save')}</a>
    </div>
    <br/>

  </div>
</script>


<script id="repository-group-delete-warning-tmpl" type='text/html'>
  <div>
    <span class="label label-warning">${$.i18n.prop('warning.not.undone.operation')}</span>
  </div>
</script>


<script id="merge-repo-dialog-content" type="text/html">
  <div class="btn-group btn-group-vertical">
    {{each(i, repository) repositories}}
    <button class="btn" type="button"
            onclick="mergeRepositories(encodeURIComponent('${sourceRepoId}'),encodeURIComponent('${repository.id()}'))">
      ${repository.name()}
    </button>
    {{/each}}
  </div>
</script>

<script id="merge-repo-skip-conflicts" type="text/html">
  <div>
    <ul>
      {{each(i, artifact) artifacts}}
      <li>${artifact.groupId}:${artifact.artifactId}:${artifact.version}</li>
      {{/each}}
    </ul>
  </div>
  <div>
    <button class="btn btn-success"
            onclick="doMerge(encodeURIComponent('${sourceRepository}'),encodeURIComponent('${targetRepository}'),false);"
            type="button">${$.i18n.prop('managedrepository.merge.domerge')}
    </button>
    {{if artifacts.length > 0}}
    <button class="btn btn-warning"
            onclick="doMerge(encodeURIComponent('${sourceRepository}'),encodeURIComponent('${targetRepository}'),true);"
            type="button">${$.i18n.prop('managedrepository.merge.domerge.skipconflicts')}
    </button>
    {{/if}}
  </div>
</script>


<script id="proxyConnectorsRulesMain" type="text/html">
  <div class="page-header">
    <h2>${$.i18n.prop('proxy-connector-rules.list')}</h2>
  </div>

  <ul id="proxy-connectors-rules-view-tabs" class="nav nav-tabs">
    <li id="proxy-connectors-rules-view-tabs-li-grid" class="active">
      <a data-toggle="tab" href="#proxy-connector-rules-view" id="proxy-connectors-rules-view-tabs-a-grid">${$.i18n.prop('proxy-connectors-rules.grid.tab.title')}</a>
    </li>
    <li id="proxy-connectors-rules-view-tabs-li-edit">
      <a data-toggle="tab" href="#proxy-connector-rules-edit" id="proxy-connectors-rules-view-tabs-a-edit">${$.i18n.prop('add')}</a>
    </li>
  </ul>
  <div id="proxy-connectors-rules-view-tabs-content" class="tab-content">
    <div id="proxy-connector-rules-view" class="tab-pane active">
      <div id="proxy-connectors-rules-view-tabs-bulk-save-btn"
           data-bind='template:{name:"proxy-connectors-rules-view-tabs-bulk-save-tmpl"}'></div>
      <table class="table table-striped table-bordered" id="proxy-connectors-rules-view-tabsTable"
             data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko-proxy-connectors-rules-grid',pageLinksId:'proxy-connectors-rules-pagination'">
      </table>
      <div id="proxy-connectors-rules-pagination"></div>
    </div>
    <div id="proxy-connector-rules-edit" class="tab-pane">
      <div class="row-fluid">
        <div class="span6 dotted">
          <div id="proxy-connectors-rules-edit-div"
               data-bind='template:{name:"proxy-connectors-rules-edit-tmpl"}'></div>
          <div id="proxy-connectors-rules-edit-order-div" style="min-height: 80px"
               data-bind="sortable: { template: 'proxy-connectors-rules-edit-proxy-connectors-tmpl-chosen',data:proxyConnectorRule.proxyConnectors,afterMove:proxyConnectorMoved}">
          </div>
        </div>

        <div class="span6 dotted">
          <h5>${$.i18n.prop('proxy-connector-rules.available.proxyConnectors')}</h5>
          <br/>

          <div id="proxy-connectors-rules-available-proxy-connectors" style="min-height: 80px"
               data-bind="sortable: { template: 'proxy-connectors-rules-edit-proxy-connectors-tmpl-availables',data:availableProxyConnectors,afterMove:proxyConnectorMoved}">

          </div>
        </div>

      </div>
    </div>

  </div>

</script>

<script id='ko-proxy-connectors-rules-grid' type='text/html'>
  <thead>
  <tr>
    <th title="${$.i18n.prop('proxy-connector-rules.grid.pattern.title')}">
      ${$.i18n.prop('proxy-connector-rules.grid.pattern.header')}
    </th>
    <th title="${$.i18n.prop('proxy-connector-rules.grid.type.title')}">
      ${$.i18n.prop('proxy-connector-rules.grid.type.header')}
    </th>
    <th>${$.i18n.prop('proxy-connector-rules.grid.proxy-connectors.header')}</th>
    <th>${$.i18n.prop('edit')}</th>
    <th>${$.i18n.prop('delete')}</th>
    <th>${$.i18n.prop('save')}</th>
  </tr>
  </thead>
  <tbody>
  {{each(i, row) itemsOnCurrentPage()}}
  <tr data-bind="css:{ 'modified': row.modified()}">
    <td>${row.pattern()}</td>
    <td><img src="${row.ruleType.image}" title="${row.ruleType.label}"></img></td>
    <td>
      <ul>
        {{each(j,proxyConnector) row.proxyConnectors()}}
        <li>${proxyConnector.sourceRepoId()} <-> ${proxyConnector.targetRepoId()}</li>
        {{/each}}
      </ul>
    </td>
    <td>
      <a href="#" data-bind="click: function(){ editProxyConnectorRule(row) }">
                <span class="btn btn-primary" data-loading-text="${$.i18n.prop('common.loading')}">
                  <i class="icon-pencil icon-white"/>
                </span>
      </a>
    </td>
    <td>
      <a data-bind="click: function(){ removeProxyConnectorRule(row) }"
         data-loading-text="${$.i18n.prop('common.loading')}">
                <span class="btn btn-danger" data-loading-text="${$.i18n.prop('common.loading')}">
                  <i class="icon-trash icon-white"/>
                </span>
      </a>
    </td>
    <td>
      {{if row.modified()}}
      <a href="#" id="proxy-connector-rule-update-btn" class="btn btn-warning"
         data-loading-text="${$.i18n.prop('common.loading')}"
         data-bind="click: function(){ updateProxyConnectorRule(row) }">${$.i18n.prop('save')}</a>
      {{/if}}
    </td>
  </tr>
  {{/each}}
  </tbody>
</script>

<script id="proxy-connectors-rules-view-tabs-bulk-save-tmpl" type="text/html">

</script>

<script id="proxy-connectors-rules-edit-tmpl" type="text/html">
  <div class="row-fluid">
    {{if update}}
    <div class="dotted span8">
      <blockquote>
        ${proxyConnectorRule.pattern()}
        <br/>
        ${proxyConnectorRule.ruleType.label}
      </blockquote>
    </div>
    {{else}}
    <div class="dotted span8">
      <form id="proxy-connector-rule-edit-form" class="well">
        <fieldset id="proxy-connector-rule-edit-fieldset">
          <div class="control-group">
            <label class="control-label" for="id">${$.i18n.prop('proxy-connector-rule.pattern')}</label>

            <div class="controls">
              <input type="text" class="input-large required" id="pattern" name="pattern" size="15"
                     data-bind="value:proxyConnectorRule.pattern,css:{'uneditable-input': update},readonly:update"/>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="layout">${$.i18n.prop('type')}</label>

            <div class="controls">
              <select id="proxy-connector-rule-pattern-type"
                      data-bind="options: proxyConnectorRulesViewModel.ruleTypes,optionsText: 'label',optionsValue:'type',value: proxyConnectorRule.proxyConnectorRuleType"/>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
    {{/if}}

    <div class="span3" data-bind="visible: proxyConnectorRule.modified()">
      {{if update && proxyConnectorRule.modified()}}
      <a href="#" class="btn btn-warning" data-loading-text="${$.i18n.prop('common.loading')}"
         id="proxy-connector-rule-update-btn"
         data-bind="click: function(){updateProxyConnectorRule(proxyConnectorRule)}">${$.i18n.prop('update')}</a>
      {{else}}
      <a href="#" class="btn btn-warning" data-loading-text="${$.i18n.prop('common.loading')}"
         id="proxy-connector-rule-add-btn" data-bind="click: function(){addProxyConnectorRule(proxyConnectorRule)}">${$.i18n.prop('add')}</a>
      {{/if}}
    </div>

    <br/>

  </div>
</script>

<script id="proxy-connectors-rules-edit-proxy-connectors-tmpl-chosen" type="text/html">
  <div class="well draggable-item">
    <i class="icon-minus-sign cursor-hand pull-right" data-source-repoId="${$data.sourceRepoId()}"
       data-target-repoId="${$data.targetRepoId()}"/>
    <blockquote>
      ${$data.sourceRepoId()} <-> ${$data.targetRepoId()}
    </blockquote>

  </div>
</script>

<script id="proxy-connectors-rules-edit-proxy-connectors-tmpl-availables" type="text/html">
  <div class="well draggable-item">
    <i class="icon-plus-sign cursor-hand pull-right" data-source-repoId="${$data.sourceRepoId()}"
       data-target-repoId="${$data.targetRepoId()}"/>
    <blockquote>
      ${$data.sourceRepoId()} <-> ${$data.targetRepoId()}
    </blockquote>

  </div>
</script>